<template>
  <div class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
    <div class="bg-white rounded-lg p-6 max-w-2xl w-full mx-4">
      <div class="flex justify-between items-center mb-4">
        <h3 class="text-lg font-semibold text-gray-900">Change Model</h3>
        <button
            @click="onClose"
            class="text-gray-400 hover:text-gray-500"
        >
          <x-icon class="w-5 h-5" />
        </button>
      </div>

      <div class="grid grid-cols-2 gap-4">
        <button
            v-for="model in filteredModels"
            :key="model.id"
            @click="selectModel(model.id)"
            class="relative aspect-square rounded-lg border-2 transition-all hover:border-indigo-500 p-4"
            :class="{
            'border-indigo-600 shadow-lg': selectedModelId === model.id,
            'border-gray-200': selectedModelId !== model.id
          }"
        >
          <div class="flex flex-col items-center justify-center h-full">
            <span class="text-lg font-medium text-center">{{ model.name }}</span>
            <span class="text-sm text-gray-500 mt-2">
              {{ model.id.replace(/_/g, ' ') }}
            </span>
          </div>
        </button>
      </div>
    </div>
  </div>
</template>

<script>
import { X } from 'lucide-vue';
import { mapState, mapActions } from 'vuex';

export default {
  components: {
    'x-icon': X,
  },
  props: {
    onClose: {
      type: Function,
      required: true,
    },
  },
  computed: {
    ...mapState({
      selectedProductType: state => state.designs.selectedProductType,
      models: state => state.models.models,
      selectedModelId: state => state.models.selectedModelId,
    }),
    filteredModels() {
      return this.models.filter(m => m.productType === this.selectedProductType);
    },
  },
  methods: {
    ...mapActions('models', ['selectModel']),
    selectModel(modelId) {
      console.log('Selecting model:', modelId);
      this.selectModel(modelId);
      this.onClose();
    },
  },
};
</script>